<template>
	<view class="page">

		<view class="p12">
			<view class="u-font-bold fz16 mb16">退款商品</view>
			<view class="mb20 bm pb16">
				<view class="u-flex" style="align-items: stretch;">
					<image :src="info.picUrl" style="width: 200rpx;" mode="widthFix"></image>
					<view class="pl12 u-f1 u-flex u-f-jsb" style="flex-direction: column;">
						<view class="fz14 u-flex u-f-jsb" style="width: 100%;">
							{{info.spuName}}
						</view>
						<view class="fz14 u-flex u-f-jsb u-font-bold" style="width: 100%;">
							￥{{info.refundAmount}}
							<span>x{{info.count}}</span>
						</view>
					</view>
				</view>
			</view>

			<view class="mb20 bm pb16">
				<view class="u-flex u-f-jsb pb10">
					<view class="fz13 c6">
						退款原因
					</view>
					<view>
						{{info.applyReason}}
					</view>
				</view>
				<view class="u-flex u-f-jsb pb10 pt10">
					<view class="fz13 c6">
						申请退款金额
					</view>
					<view>
						￥{{info.refundAmount}}
					</view>
				</view>
				<view class="u-flex u-f-jsb pb10 pt10">
					<view class="fz13 c6">
						实际退款金额
					</view>
					<view>
						￥{{info.refundAmount}}
					</view>
				</view>
				<view class="u-flex u-f-jsb pb10 pt10">
					<view class="fz13 c6">
						申请退款时间
					</view>
					<view>
						
					</view>
				</view>
			</view>

			<view class="mb20">
				<view class="pb10">
					<view class="fz13 c6">
						补充描述
					</view>
					<view class="mt10">
						{{info.applyDescription}}
					</view>
					<view class="pic-list mt10">
						<img @click="toPreview(info.applyPicUrls,index)" class="w50 h50 brs3" :src="item" v-for="(item,index) in info.applyPicUrls" :key="index"/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				//nodetype:0:商品准备中;1:已发货;2:已揽件;3:运输中;4:派送中；5：已签收
				sysInfo: getApp().globalData.sysInfo,
				info: "",
				navTitle: "订单详情",
				logistics: {}
			}
		},
		onLoad(e) {
			// e.id=1
			this.orderId = e.id
			this.getInfo();
		},
		onShow() {},
		computed: {},
		methods: {
			toPreview(attr, idx) {
				uni.previewImage({
					current: idx,
					urls: attr,
				});
			},
			toRefund(item) {
				this.$db.set('refundInfo', JSON.stringify(item))
				uni.navigateTo({
					url: '/pages/user/order/return'
				})
			},
			copy: function(txt) {
				wx.setClipboardData({
					data: txt,
					success(res) {
						wx.showToast({
							title: "复制成功",
							icon: "none"
						})
					}
				})
			},
			getInfo: function() {

				let that = this
				let data = {
					id: that.orderId,
				}
				that.$api.afterSaleDetail(data, res => {
					if (res.code == 200) {
						that.info = res.data
					} else {
						this.$common.errorToShow(res.message)
					}
				})
			}
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.copy {
		padding: 5rpx 10rpx;
		background: #ededed;
		border-radius: 40rpx;
		margin-right: 20rpx;
		line-height: 30rpx;
		font-size: 20rpx;
	}

	.btn {

		width: 184rpx;
		height: 64rpx;
		text-align: center;
		color: #fff;
		line-height: 64rpx;
		background: #70B52C;
		border-radius: 16rpx;
	}

	.btn1 {

		width: 184rpx;
		height: 64rpx;
		text-align: center;
		color: #70B52C;
		line-height: 64rpx;
		background: #fff;
		border: 1px solid #70B52C;
		border-radius: 16rpx;
	}

	.line {
		width: 750rpx;
		height: 4rpx;
		position: relative;
		top: -4rpx;
		background: #F6F9F9;
		border-radius: 0px 0px 0px 0px;
	}

	.status1 {
		color: #E54440;
	}

	.status2 {
		color: #39959B;
	}

	.status3 {
		color: #333;
	}
</style>